﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="View1.aspx.cs" Inherits="BackboneJs_pluralsight_View1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../Scripts/jquery-2.0.0.min.js" type="text/javascript"></script>
    <script src="../../Scripts/underscore.js" type="text/javascript"></script>
    <script src="../../Scripts/backbone.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    <script type="text/javascript">
        var V = Backbone.View.extend({
           id:'test',
           tagName:'li',
           className:'newItem',
           attributes: {'data-valu':123}
       });
       var v = new V();
       $('body').append(v.el);

       var X = Backbone.View.extend({});
       var x = new X({ el: "#form1" });

       x.$el.css('background-color', '#ccc');
       x.$el.css({
           width:50,
           height:40
       });


       var RefreshingView = Backbone.View.extend({
           initialize: function () {
               this.model.on('change', function () {
                   this.render();
               }, this);
           },

           render: function () {
               this.$el.html(this.model.get('text'));
           }
       });

       var m = new Backbone.Model({ text: new Date().toString() });
       
       var r = new RefreshingView({ model: m ,el:'body'});
       r.render();
       setInterval(function() { m.set({ text: new Date().toString() }); }, 1000);
    </script>
    </form>
</body>
</html>
